import React, { useCallback ,useEffect} from 'react'
import _throttle from 'lodash/throttle'

const A = () => {return (
	<>www</>
)}


export default function List() {
	
  // 计算容器最大容积数量
  // const changeHeight = useCallback(_throttle(() => {
  //   // 容器高度，通过操作dom元素获取高度是因为它不一定是个定值
  //   curContainerHeight.current = containerRef.current.offsetHeight
  //   // 列表最大数量，考虑到列表中顶部和底部可能都会出现没有展现完的item
  //   curViewNum.current = Math.ceil(curContainerHeight.current / itemHeight) + 1
  // }, 500), [])

  // useEffect(() => {
  //   // 组件第一次挂载需要初始化容器的高度以及最大容纳值
  //   changeHeight()
  //   // 监听浏览器大小的变化,当浏览器大小改变之后需要重新执行changeHeight
  //   window.addEventListener('resize', changeHeight)
  //   return () => {
  //     window.removeEventListener('resize', changeHeight)
  //   }
  // }, [changeHeight])

  // // 监听滚动事件动态截取数据&&设置上下滚动缓冲消除快速滚动白屏
  // const scrollHandle = () => {
  //   // 可视区第一个元素的索引值
  //   let startIndex = Math.floor(containerRef.current.scrollTop / itemHeight) // itemHeight是列表每一项的高度
  //   // 优化：如果是用户滚动触发的，而且两次startIndex的值都一样，那么就没有必要执行下面的逻辑
  //   if (!isNeedLoad && lastStartIndex.current === startIndex) return
  //   isNeedLoad.current = false
  //   lastStartIndex.current = startIndex
  //   const containerMaxSize = curViewNum.current
  //   /**
  //    * 解决滑动过快出现的白屏问题
  //    * 因为我们实际上需要三板的数据用于兼容低性能的设备，用做上下滚动的缓冲区域，避免滑动的时候出现白屏
  //    * 现在的startIndex是可视区的第一个元素索引，再加上2倍可视区元素量，刚好在下方就会多出一板来当做缓冲区
  //    */
  //   // 此处的endIndex是为了在可视区域的下方多出一板数据
  //   let endIndex = startIndex + 2 * containerMaxSize - 1
  //   // 接近滚动到屏幕底部的时候，就可以请求发送数据了，这个时候触底的并不是可视区的最后一个元素，而是多出那一版的最后一个元素触底了
  //   const currLen = dataListRef.current.length
  //   if (endIndex > currLen - 1) {
  //     // 更新请求参数，发送请求获取新的数据(但是要保证当前不在请求过程中，否则就会重复请求相同的数据)
  //     !isRequestRef.current && setOptions(state => ({ offset: state.offset + 1 }))
  //     // 如果已经滚动到了底部，那么就设置endIndex为最后一个元素索引即可
  //     endIndex = currLen - 1
  //   }
  //   // 此处的endIndex是为了在可视区域的上方多出一板数据
  //   // 这里人为的调整startIndex的值，目的就是为了能够在可视区域上方多出一板来当做缓冲区，这样就不会出现滑动到底部，然后请求太慢导致卡在最下面的情况
  //   if (startIndex <= containerMaxSize) { // containerMaxSize是我们之前计算出来的容器容纳量
  //     startIndex = 0
  //   } else {
  //     startIndex = startIndex - containerMaxSize
  //   }
  //   // 使用slice方法截取数据，但是要记住第二个参数对应的索引元素不会被删除，最多只能删除到它的前一个，所以我们这里的endIndex需要加一
  //   setShowList(dataListRef.current.slice(startIndex, endIndex + 1))
  // }
  return (
	<>
	<A></A>
	2</>
  )
}
